<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img v-lazy="item" width="100%" height="212" />
      </van-swipe-item>
    </van-swipe>
    <van-search
      v-model="value"
      show-action
      label="上海 ^"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <van-icon
          @click="$router.push('/rentmap')"
          name="location-o"
          size="28"
          color="#fff"
          style="text-align: center; padding-top: 6px"
        />
      </template>
    </van-search>
    <!-- 列表 -->
    <van-grid height="122" icon-size="40">
      <van-grid-item
        icon="wap-home-o"
        border="false"
        text="整租"
        to="/layout/find"
      />
      <van-grid-item icon="friends-o" text="合租" to="/layout/find" />
      <van-grid-item icon="location-o" text="地图找房" to="/rentMap" />
      <van-grid-item icon="shop-collect-o" text="去出租" to="/login" />
    </van-grid>

    <!-- 租房小组 -->
    <div class="group">
      <van-cell-group>
        <van-cell title="租房小组" value="更多" />
        <van-grid :column-num="2" :gutter="10" direction="horizontal">
          <van-card
            v-for="item in groups"
            :key="item.id"
            centered
            :desc="item.desc"
            :title="item.title"
            :thumb="'http://liufusong.top:8080' + item.imgSrc"
          />
        </van-grid>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getImages, getGroups } from '@/api/recommend'
export default {
  name: 'home',
  data () {
    return {
      images: [],
      value: '',
      groups: []
    }
  },

  created () {
    this.getImages()
    this.getGroups()
  },

  methods: {
    async getImages () {
      const res = await getImages()
      this.images = res.data.body.map(
        (item) => 'http://liufusong.top:8080' + item.imgSrc
      )
      // console.log(this.images)
    },
    async getGroups () {
      const res = await getGroups()
      this.groups = res.data.body
      console.log(this.groups)
    }
  }
}
</script>

<style scoped lang="less">
.van-card {
  // margin: 0 10px;
  // display: flex;
  // flex: 1;
  // background-color: #f6f5f6;
  padding: 0 10px;
}
.my-swipe .van-swipe-item[data-v-1d9b105c] {
  background-color: #fff;
}
.van-swipe-item {
  height: 212px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.van-search {
  position: absolute;
  top: 25px;
  width: 100%;
  padding: 0 10px;
  z-index: 2;
  background-color: transparent;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
